<template>
    <div class="Product">
        <div class="Header">
            {{ HeaderTitle }}
        </div>
        <div class="ProductIndex">
            <div class="but" v-if="!PageFlag">
                <a-button @click="Back">
                    返回入货单
                </a-button>
            </div>
            <div class="ProductTody">
                <a-form :model="StorageList" :rules="rules" ref="ProductAddDom">
                    <a-form-item label="操作员工号  ">
                        <span>{{ StorageList.storageAdminId }}</span>
                    </a-form-item>
                    <a-form-item label="商 品 名 称" name="storageName">
                        <a-input v-model:value="StorageList.storageName" placeholder="请输入入商品名称" :readonly="!PageFlag" />
                    </a-form-item>
                    <a-form-item name="storageClassificationId" label="商 品 分 类 ">
                        <a-select ref="select" v-model:value="StorageList.storageClassificationId" allowClear
                            :disabled="!PageFlag">
                            <a-select-option v-for="(item, index) in List" :value="item.classificationId" :key="index">{{
                                item.classificationName }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item name="storageStashId" label="入 库 仓 库 " v-if="PageFlag">
                        <a-select ref="select" v-model:value="StorageList.storageStashId" allowClear>
                            <a-select-option v-for="(item, index) in StashList" :value="item.stashId" :key="index">{{
                                item.stashName }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="分 布 仓 库 " v-if="!PageFlag">

                        <span v-for="(item, index) in StashList">{{ index === StashList.length - 1 ? item.stashName
                            : item.stashName + "，" }}</span>
                    </a-form-item>
                    <a-form-item name="storageStashId" label="出 库 仓 库 " v-if="!PageFlag">
                        <a-select ref="select" v-model:value="StorageList.storageStashId" allowClear>
                            <a-select-option v-for="(item, index) in StashList" :value="item.stashId" :key="index">{{
                                item.stashName }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item name="storageNumber" label="商 品 数 量 " v-if="PageFlag">
                        <a-input v-model:value="StorageList.storageNumber" placeholder="请输入入库商品数量" />
                    </a-form-item>
                    <a-form-item name="storageVolumes" label="商 品 总 数" v-if="!PageFlag">
                        <a-input v-model:value="StorageList.storageVolumes" placeholder="请输入入库商品数量" :readonly="!PageFlag" />
                    </a-form-item>
                    <a-form-item name="storageVolumes" label="商品单个质量" v-if="PageFlag">
                        <a-input v-model:value="StorageList.storageVolumes" placeholder="请输入入库商品质量">
                            <template #addonAfter>
                                <a-select v-model:value="StorageList.selectList" style="width: 80px">
                                    <a-select-option value="1">立方分米</a-select-option>
                                    <a-select-option value="2">立方米</a-select-option>
                                    <a-select-option value="3">立方千米</a-select-option>
                                </a-select>
                            </template>
                        </a-input>

                    </a-form-item>
                    <a-form-item label="商 品 规 格" v-if="!PageFlag">
                        <span>{{ storageVolume }}</span>
                    </a-form-item>
                    <a-form-item name="storageNumber" label="出 货 数 量" v-if="!PageFlag">
                        <a-input v-model:value="StorageList.storageNumber" placeholder="请输入入库商品数量" />
                    </a-form-item>

                    <div class="btn">
                        <a-button @click="clear" v-if="PageFlag">清除</a-button>
                        <a-button type="primary" @click="ProductAdd" v-if="PageFlag">入库</a-button>
                        <a-button type="primary" v-else @click="OutStorageInformational">出库</a-button>
                    </div>
                </a-form>
            </div>

        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { ClassificationSelectAll, Storage, ProductSelectId, StashSelectList, StockRemoval } from "../../Axios/General"
import { StashSelectAll } from "../../Axios/Admin"
import { GetLeave } from "../../utils/token"
import { area } from "../../utils/unit"
import { message } from "ant-design-vue"
import { useRoute, useRouter } from "vue-router"

const res = ref()
const route = useRoute()
const router = useRouter()
const ProductAddDom = ref()
const List = ref([{ classificationId: 0, classificationName: "" }])
const StashList = ref([{ stashId: 0, stashName: "" }])
let HeaderTitle = ref("入库表单")
let PageFlag = ref()
let storageVolume = ref()
let StorageList = ref({
    storageName: "",
    storageAdminId: 0,
    storageStashId: "",
    storageClassificationId: "",
    storageVolumes: 0,
    storageVolume: 0,
    storageState: 0,
    storageNumber: 0,
    selectList: "2",
    storageProductId: ""
})

const Back = () => {
    router.push({
        name: "Storage"
    })
}


const OutStorageInformational = () => {
    ProductAddDom.value.validate().then(async () => {

        const res = await StockRemoval(StorageList)
        console.log(res);

        if (res.code == 200) {
            message.success(res.message)
            router.push({
                name: "productIndex"
            })

        } else {
            message.warning(res.message)
        }

    })
}

const initDate = async () => {
    StorageList.value = {
        storageName: "",
        storageAdminId: 0,
        storageStashId: "",
        storageClassificationId: "",
        storageVolumes: 0,
        storageVolume: 0,
        storageState: 0,
        storageNumber: 0,
        selectList: "2",
        storageProductId: ""
    }
    Id()
    if (route.query.id) {
        PageFlag.value = !route.query.id
        HeaderTitle.value = "出库表单"
        initProduct(route.query.id)
    } else {
        PageFlag.value = true
        HeaderTitle.value = "入库表单"
        res.value = await ClassificationSelectAll()
        const req = await StashSelectAll()
        if (res.value) {
            List.value = res.value.data
        }

        if (req) {
            StashList.value = req.data
        }

    }
}

const initProduct = async (id) => {
    StorageList.value.storageProductId = id
    const res = await ProductSelectId({ productId: parseInt(id) })
    res.value = await ClassificationSelectAll()
    if (res.code == 200) {
        // StorageList.value = res.data
        StorageList.value.storageName = res.data.productName
        StorageList.value.storageVolumes = res.data.productNumber
        StorageList.value.storageVolume = res.data.productSpecification

        storageVolume.value = area(StorageList.value.storageVolume)




        List.value = [{ classificationId: 0, classificationName: "" }]
        List.value[0].classificationId = res.data.productClassificationId
        if (res.value.code == 200 && res.value.data.length > 0) {

            for (let index = 0; index < res.value.data.length; index++) {


                if (res.value.data[index].classificationId == res.data.productClassificationId) {
                    List.value[0].classificationName = res.value.data[index].classificationName;


                    break;
                }
            }
            StorageList.value.storageClassificationId = res.data.productClassificationId

            let one = res.data.productStash.split(",")
            const res1 = await StashSelectList(one)

            if (res1.code == 200) {
                StashList.value = res1.data
            }

        }
    }
}

const rules = {
    storageName: [{ required: true, message: "请填写商品名称", trigger: "blur" },
    { min: 2, max: 16, message: "输入的字符在2-16范围内", trigger: "blur" },
    { pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: "不能包含数字和特殊字符", trigger: "blur" }],
    storageNumber: [{ required: true, message: "请填写商品数量", trigger: "blur" },
    { pattern: /^[1-9]$|[1-9][0-9]{1,}$/, message: "输入的内容不能为中文、英文、特殊字符以及小于0", trigger: "blur" }],
    storageVolume: [{ required: true, message: "请填写商品数量", trigger: "blur" },
    { pattern: /^[1-9]$|[1-9][0-9]{1,}$/, message: "输入的内容不能为中文、英文、特殊字符以及小于0", trigger: "blur" }],
    storageVolumes: [{ required: true, message: "请填写商品质量", trigger: "blur" },
    { pattern: /^[1-9]$|[1-9][0-9]{1,}$/, message: "输入的内容不能为中文、英文、特殊字符以及小于0", trigger: "blur" }],
    storageStashId: [{ required: true, message: "请选择入库的仓库", trigger: "blur" }],
    storageClassificationId: [{ required: true, message: "请选择商品分类", trigger: "blur" }]
}
const Id = () => {
    let one = GetLeave()
    if (one) {
        StorageList.value.storageAdminId = parseInt(one)
    }
}

Id()


onMounted(async () => {
    initDate()

})

const clear = () => {
    StorageList.value = {
        storageName: "",
        storageAdminId: 0,
        storageStashId: "",
        storageClassificationId: "",
        storageVolume: 0,
        storageVolumes: 0,
        storageState: 0,
        storageNumber: 0,
        selectList: "2",
        storageProductId: "2"
    }
    Id()
}
const ProductAdd = () => {
    StorageList.value.storageState = 1
    ProductAddDom.value.validate().then(async () => {
        // if()
        switch (StorageList.value.selectList) {
            case "1":
                StorageList.value.storageVolume = StorageList.value.storageVolumes / 1000
                break;
            case "2":
                StorageList.value.storageVolume = StorageList.value.storageVolumes
                break;
            case "3":
                StorageList.value.storageVolume = StorageList.value.storageVolumes * 1000
                break;
        }
        const res = await Storage(StorageList)
        if (res.code == 200) {
            clear()
            message.success(res.message)
        } else {
            message.warn(res.message)
        }

    })

}

</script>

<style scoped lang="scss">
.Product {
    width: 100%;
    height: 100%;

    .ProductIndex {
        width: 100%;
        min-height: 100%;
        background: url("../../assets/jpg/主页.jpg") no-repeat;
        background-size: cover;
        padding: 20px 0px 50px 0px;

        .but {
            width: 60%;
            margin: 0 auto;

        }

        .ProductTody {
            background: #fff;
            width: 60%;
            height: auto;
            margin: 0 auto;
            padding: 20px;

            .btn {
                width: 100%;
                text-align: center;
                margin-top: 20px;

                .ant-btn {
                    margin-right: 20px;
                }
            }

            .ant-input-group-addon {
                &>.ant-select {
                    width: 100px !important;
                }
            }

        }
    }

    .Header {
        width: 100%;
        text-align: center;
        font-size: 18px;
        margin-bottom: 20px;
    }
}
</style>